
<template>
  <div class="section user-section">
    <div class="head">
      <van-nav-bar class="nav-bar">
        <template #left>
          <van-icon name="arrow-left" @click="router.go(-1)" />
        </template>

        <template #title>
          <div class="title">会议详情</div>
        </template>
      </van-nav-bar>
    </div>
    <van-form @submit="onSubmit">
      <div style="display: flex" v-if="fromWhere === 'newDaily'">
        <van-cell title="确认无误" label="确认无误后发布会议" size="large" />
        <div
          style="
            background-color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
          "
        >
          <van-button
            round
            type="success"
            size="small"
            style="width: 1.5rem; margin: 3px"
            native-type="submit"
            >发布</van-button
          >
        </div>
      </div>
      <van-cell-group style="margin-top: 5px">
        <van-field
          v-model="formState.dailyDate"
          is-link
          readonly
          name="dailyDate"
          label="会议日期"
          placeholder="点击选择日期"
          @click="formState.showDate = true"
          :rules="rules.date"
        />
        <van-popup
          v-if="fromWhere === 'newDaily'"
          v-model:show="formState.showDate"
          position="bottom"
        >
          <van-datetime-picker
            type="date"
            v-model="currentDate"
            @confirm="onConfirmDate"
            @cancel="formState.showDate = false"
          />
        </van-popup>
        <van-field
          v-model="formState.dailyTime"
          is-link
          readonly
          name="dailyTime"
          label="会议时间"
          placeholder="点击选择时间"
          @click="formState.showTime = true"
          :rules="rules.time"
        />
        <van-popup
          v-if="fromWhere === 'newDaily'"
          v-model:show="formState.showTime"
          position="bottom"
        >
          <van-datetime-picker
            type="time"
            v-model="currentTime"
            @confirm="onConfirmTime"
            @cancel="formState.showTime = false"
          />
        </van-popup>
        <van-field
          v-model="formState.position"
          :readonly="fromWhere != 'newDaily'"
          name="position"
          label="会议地点"
          placeholder="如教二221"
          :rules="rules.position"
        />
        <van-field
          v-model="formState.dailyType"
          is-link
          readonly
          name="dailyType"
          label="会议类型"
          placeholder="点击选择会议类型"
          @click="formState.showType = true"
          :rules="rules.type"
        />
        <van-popup
          v-model:show="formState.showType"
          v-if="fromWhere === 'newDaily'"
          position="bottom"
        >
          <van-picker
            :columns="dailyType"
            @confirm="onConfirmType"
            @cancel="formState.showType = false"
          />
        </van-popup>
        <van-field
          v-if="fromWhere === 'newDaily'"
          name="checkboxGroup"
          label="参会对象"
          :rules="rules.members"
        >
          <template #input>
            <van-checkbox-group v-model="formState.groupChecked">
              <van-checkbox name="积极分子">积极分子</van-checkbox>
              <van-checkbox name="预备党员">预备党员</van-checkbox>
              <van-checkbox name="正式党员">正式党员</van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-model="formState.topic"
          :readonly="fromWhere != 'newDaily'"
          name="topic"
          type="textarea"
          autosize
          label="会议/活动主题"
          placeholder="请填写主题"
          :rules="rules.topic"
        />
        <van-field
          v-model="formState.attention"
          :readonly="fromWhere != 'newDaily'"
          name="attention"
          type="textarea"
          autosize
          label="注意事项"
          placeholder="说明活动注意事项，如戴口罩戴党徽"
          :rules="rules.attention"
        />
      </van-cell-group>
    </van-form>
    <template
      v-if="
        fromWhere === 'check' &&
        formState.dailyType === '读书交流会' &&
        needThink
      "
    >
      <van-form @submit="onSubmitThinking" style="margin-top: 10px">
        <van-cell-group>
          <van-field
            v-model="formState.thinking"
            name="think"
            rows="4"
            autosize
            label="读书交流会感想"
            type="textarea"
            maxlength="200"
            placeholder="请输入感想"
            show-word-limit
            :rules="[{ required: true, message: '请填写感想' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交感想
          </van-button>
        </div>
      </van-form>
    </template>
    <template
      v-if="
        fromWhere === 'check' &&
        formState.dailyType === '读书交流会' &&
        user.userInfo.userType === '支部管理员'
      "
    >
      <div style="margin-top: 10px">
        <van-cell-group>
          <van-field
            v-model="formState.notSubmit"
            rows="4"
            autosize
            label="未提交名单"
            type="textarea"
            show-word-limit
            :rules="[{ required: true, message: '请填写感想' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" @click="exportThink">
            导出感想
          </van-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  computed,
  onMounted,
  watch,
  onBeforeUnmount,
  shallowRef,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import useClipboard from "vue-clipboard3";
import toasts from "/@/views/components/toasts";
import { useStore } from "vuex";
import {
  newDaily,
  submitThink,
  getSingleThink,
  checkNotSubmit,
  getThinks,
} from "/@/api/branch";
import { report } from "process";

const router = useRouter();
const route = useRoute();
const store = useStore();
const user = store.state.storage.user;
const token = user.token;
const currentDate = ref(new Date());
const currentTime = ref("19:00");
const fromWhere = ref();
const needThink = ref(false);
const { toClipboard } = useClipboard();

const formState = reactive({
  dailyTime: "",
  dailyDate: "",
  dailyType: "",
  dailyId: "-1", // 默认值-1如果有则改
  topic: "",
  position: "",
  attention: "",
  groupChecked: [],
  showDate: false,
  showTime: false,
  showType: false,
  thinking: "",
  notSubmit: "",
});

const dailyType = [
  "读书交流会",
  "入党答辩",
  "发展转正大会",
  "组织生活会",
  "其他",
];

const onConfirmType = (value) => {
  formState.dailyType = value;
  formState.showType = false;
};

const onConfirmDate = (value) => {
  formState.dailyDate = value.format("yyyy-MM-dd");
  formState.showDate = false;
};

const onConfirmTime = (value) => {
  formState.dailyTime = value;
  formState.showTime = false;
};

//表单操作
const trigger = "onBlur";
const onSubmit = (value) => {
  console.log("提交事件", value);
  let participant = value.checkboxGroup.join("-");
  newDaily(
    {
      token: token, //用户秘钥
      dailyType: value.dailyType,
      dailyTime: value.dailyTime, // 活动时间
      dailyDate: value.dailyDate, //活动日期
      position: value.position, //活动地点
      topic: value.topic,
      attention: value.attention,
      participant: participant, //参会人员
    },
    (res) => {
      if (res.code === 0) {
        toasts.success("成功发布");
      } else {
        toasts.fail("发布失败");
      }
    }
  );
};

const onSubmitThinking = (value) => {
  console.log("提交感想", value);
  submitThink(
    {
      token: token,
      content: value.think,
      dailyId: formState.dailyId,
    },
    (res) => {
      if (res.code === 0) {
        toasts.success("提交成功");
      }
    }
  );
};
const exportThink = () => {
  getThinks(
    {
      dailyId: formState.dailyId,
      branch: user.userInfo.branch,
    },
    (res) => {
      if (res.code === 0) {
        console.log("感想", res);
        copyThinks(res.thinks)
        toasts.success("支部感想复制到剪切板中");
      }
    }
  );
};
const checkDate = (value, rule) => {
  if (fromWhere.value != "newDaily") return true; // 不是新建的不需要提交
  if (!value) return "请选择日期";
  return true;
};
const checkTime = (value, rule) => {
  if (fromWhere.value != "newDaily") return true; // 批报告不需要提交日期
  if (!value) return "请选择活动时间";
  return true;
};
const checkType = (value, rule) => {
  if (fromWhere.value != "newDaily") return true;
  if (!value) return "请选择活动类型";
  return true;
};
const checkattention = (value, rule) => {
  if (fromWhere.value != "newDaily") return true;
  if (fromWhere.value === "newDaily" && !value) return "请输入注意事项";
  return true;
};
const checkposition = (value, rule) => {
  if (fromWhere.value != "newDaily") return true;
  if (fromWhere.value === "newDaily" && !value) return "请输入活动地点";
  return true;
};
const checkmembers = (value, rule) => {
  if (fromWhere.value != "newDaily") return true;
  if (fromWhere.value === "newDaily" && !value) return "请输入参会人员";
  return true;
};
const checktopic = (value, rule) => {
  if (fromWhere.value != "newDaily") return true;
  if (fromWhere.value === "newDaily" && !value) return "请输入主题";
  return true;
};

const rules = {
  date: [{ validator: checkDate, trigger }],
  time: [{ validator: checkTime, trigger }],
  type: [{ validator: checkType, trigger }],
  attention: [{ validator: checkattention, trigger }],
  position: [{ validator: checkposition, trigger }],
  members: [{ validator: checkmembers, trigger }],
  topic: [{ validator: checktopic, trigger }],
};

onMounted(() => {
  fromWhere.value = route.params.fromWhere ? route.params.fromWhere : "";
  if (fromWhere.value === "check") {
    let daily = JSON.parse(route.params.daily);
    formState.dailyTime = daily.dailyTime;
    formState.dailyType = daily.dailyType;
    formState.dailyDate = daily.dailyDate;
    formState.attention = daily.attention;
    formState.topic = daily.topic;
    formState.position = daily.position;
    formState.dailyId = daily.id;
    const userType = user.userInfo.userType;
    if (userType === "积极分子" || userType === "预备党员") {
      needThink.value = true;
    }
    if (daily.dailyType === "读书交流会" && needThink.value) {
      getSingleThink(
        {
          token: token,
          dailyId: daily.id,
        },
        (res) => {
          if (res.code === 0) {
            formState.thinking = res.content;
          }
        }
      );
    }
    if (userType === "支部管理员") {
      checkNotSubmit(
        {
          dailyId: daily.id,
          branch: user.userInfo.branch,
        },
        (res) => {
          if (res.code === 0) {
            console.log("未提交名单", res);
            formState.notSubmit = res.memberList.join("，");
          }
        }
      );
    }
  }
});
const copyThinks = async (val) => {
  try {
    await toClipboard(val);
  } catch (e) {
    toasts.fail(e);
  }
};
</script>


<style lang="scss" scoped>
.user-section {
  background: var(--yu-gray-color--light);
  min-height: 100vh;
  .checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .head {
    height: 50px;
    position: relative;
    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--yu-linear-bg-color);
      border: none;
      .van-icon {
        color: var(--yu-white-color);
      }
      .title {
        color: var(--yu-white-color);
      }
      &:after {
        border: none;
      }
    }
    .head-bg {
      height: 150px;
      background: var(--yu-linear-bg-color);
      position: relative;
      overflow: hidden;
      width: 100%;
      img {
        display: inline-block;
        position: absolute;
        width: 80px;
        height: auto;
        opacity: 0.2;
        &.img1 {
          top: 0;
          right: 0;
        }
        &.img2 {
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  .user-info {
    position: absolute;
    top: 66px;
    left: 13px;
    width: calc(100% - 26px);
    z-index: 9;

    .card-body-wrapper {
      .avatar {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 16px;
        box-shadow: var(--yu-border-shadow--light);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        color: rgba(36, 45, 61, 1);
        font-size: 12px;
        line-height: 18px;
        padding-top: 10px;
        text-align: left;
        width: calc(100% - 60px - 16px);
        .user-name {
          margin-bottom: 4px;
          font-weight: 600;
        }
      }
    }
  }

  .body {
    padding: 0 13px;
    margin-top: 10px;
  }
  .user-info-card {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
  }
  .user-info-list {
    font-size: 15px;
  }
}
</style>